<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
		<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style type="text/css">
	.layui-form-label{
	    width:auto;
	}	
	
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
	<div class="layui-form-item">
	<div class="layui-inline">
					<label class="layui-form-label">月份</label>
					<div class="layui-input-inline">
						   <input class="layui-input" placeholder="月份" name="ATTEND_DATE" autocomplete="off" id="ATTEND_DATE">
				</div>	
				</div>
			<div class="layui-inline">
					<label class="layui-form-label">员工</label>
					<div class="layui-input-inline">
						<select  id="UserId" 	lay-filter="UserId"> </select></div>
				</div>	
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit="" lay-filter="search">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>	
			</div>	
	</form>
	 <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
    var _Servlet = "AttendancdOTTimeServlet";    
    
	layui.use(["element", "form","jquery","table", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let table = layui.table;
		let okMock = layui.okMock;
		let $ = layui.jquery;
		laydate.render({
            elem: '#ATTEND_DATE',
            type: "month",
            value: '2021-06'
        });
		okLoading.close();	
		okUtils.ajax("UserServlet?method=getUserSelect", "get", null, true).done(function (response) {
			   var data =response.data;			 	
			  var txtconent = "<option value=''>请选择</option>";
			  for(var i = 0; i < data.length; i ++){
				  txtconent = txtconent + "<option value='"+data[i].UserId+"'>"+data[i].Account + " "+data[i].RealName+"</option>"
			  }
			  $("#UserId").html(txtconent);
			  form.render();
			}).fail(function (error) {
				console.log(error)
		});
		
		var  searchcondition =JSON.stringify({UserId:1});
		let stable = table.render({
			elem: '#tableId',
			url: "../../"+_Servlet +"?method=getList",	
			toolbar: true,
			defaultToolbar: false,
			size: "sm",
			page:false,
			limit:100,	
			toolbar: "#toolbarTpl",
			where: {searchcondition: searchcondition},
			cols: [[			
			    {title: "XUHAO", type :"numbers", width: 50},	
			    {field: "ID", title: "id", width: 100, hide: true},
				{field: "Account", title: "姓名", width: 80},
				{field: "RealName", title: "姓名", width: 80},
				{field: "S_ATTEND_DATE", title: "加班日期", width: 120},
				{field: "START_TIME", title: "加班开始", width: 100},
				{field: "END_TIME", title: "加班结束", width: 100},
				{field: "HOURS", title: "加班時數", width: 100},
				{field: "REMARK", title: "加班理由", width: 100},
				{title: "详细", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
			]],			
			done: function (res, curr, count) {
				console.info(res, curr, count);
			}
		});		
		
		form.on("submit(search)", function (data) {		  
		      var UserId= $("#UserId").val();
		      if(!UserId){
		    	  okLayer.greenTickMsg("请选择人员");
		    	  return false;
		      }
		      var searchdata = data.field;		   
			    var  searchcondition =JSON.stringify(searchdata);
			    stable.reload({
					where: {searchcondition: searchcondition},
					page: {curr: 1}
				});
				return false;
		});
		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "add":
					add();
					break;			
			}
		});
		
		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "edit":
					edit(data);
					break;
				case "del":
					del(data);
					break;
			}
		});	
		
		function add() {
			okLayer.dialogOpen({url:"form.html",callBack:function(iframeId){ 
				frames[iframeId].AcceptClick();
				  stable.reload();
				  layer.closeAll();
				}
			});
		}

		function edit(data) {			
			okLayer.dialogOpen({url:"form.html?ID="+data.ID,width:'100%',height:'100%',callBack:function(iframeId){ 
				frames[iframeId].AcceptClick();
				  stable.reload();
				  layer.closeAll();
				}
			});
		  
		}

		function del(data) {
			okLayer.confirm("SURE DELETE ?", function () {			
				okUtils.ajax(_Servlet +"?method=delete", "get", {ID: data.ID}, true).done(function (response) {
				    stable.reload();
					okUtils.tableSuccessMsg(response.msg);
				}).fail(function (error) {
					console.log(error)
				});
			})
		}
	
	
	});
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">新增</button>	
</div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>	
</script>

</body>
</html>
